<template>
  <div>
    <h1 @click="titClick">11111{{ title }}</h1>
    <h2 @click="$store.commit('switch_dialog')">222</h2>
    <h2 @click="$store.dispatch('switch_dialog')">333</h2>
    <v-top></v-top>
    <v-main></v-main>
    <v-bottom></v-bottom>

  </div>
</template>

<script>

import vTop from './top'
import vMain from './main'
import vBottom from './bottom'
import {mapState} from 'vuex'

export default {
  data() {
    return {
      title: 'Top'
    }
  },
  components: {
    vTop, vMain, vBottom
  },
  methods: {
    titClick() {
      this.$store.state.author = true
      this.title = this.$store.state.author
    }
  }
}

</script>

<style scoped>
h1{
  border-bottom: #ccc solid 20px;
}
  

</style>